import React, { useRef, useEffect } from "react";
import {
    Scene, WebGLRenderer, MeshNormalMaterial, Mesh, DoubleSide, Shape,
    Matrix4, Vector3, Vector2, Object3DEventMap, MeshPhongMaterial, MeshBasicMaterial,
    BoxGeometry, TetrahedronGeometry, DodecahedronGeometry, IcosahedronGeometry, PolyhedronGeometry, SphereGeometry,
    TubeGeometry, LatheGeometry, ExtrudeGeometry,
    WireframeGeometry, EdgesGeometry,
    LineSegments, LineBasicMaterial,
    Color,
} from 'three';
import "./css/ResponsiveDesign.css"
import Stage from '../component/Stage';
import CustomSinCurve from '../component/CustomSinCurve';

//Canvas自适应


const stage = new Stage();
const { scene, renderer } = stage;



//网格几何体
// const sphere = new SphereGeometry(1, 8, 8);
// const wireframe = new WireframeGeometry(sphere);
// const line = new LineSegments(wireframe);
// scene.add(line);
// const mat = line.material as LineBasicMaterial;
// mat.color = new Color(0, 0.5, 1);
// mat.transparent = true;
// mat.opacity = 0.5;


//边缘几何体
const sphere = new SphereGeometry(1, 8, 8);
const wireframe = new EdgesGeometry(sphere);
const line = new LineSegments(wireframe);
scene.add(line);





let isRender: number = 0;
const RenderStructure = () => {
    const divRef = useRef<HTMLDivElement>(null);
    useEffect(() => {
        const { current } = divRef;
        if (current != null) {
            current.innerHTML = '';
            current.append(stage.renderer.domElement);
        }
        if (isRender == 0)
            stage.animate();
        isRender++;
    }, []);
    return (
        <div ref={divRef}></div>
    );
};

export default RenderStructure;